<template>
  <view class="confirmOrder">
    <view class="card addressBox" @click="dizhi()">
      <image :src="BaseUrl + '/static/common/dw.png'" mode="scaleToFill" />
      <view class="text">
        <view class="user">
          <text class="name">{{ address.name || "请选择收货地址" }}</text>
          <text class="mobile">{{ address.mobile || "" }}</text>
        </view>
        <view class="address">
          {{ address.formatted_address || "" }} {{ address.address || "" }}
        </view>
      </view>
      <u-icon name="arrow-right" style="margin-left: auto"></u-icon>
    </view>
    <view class="card" style="padding: 20rpx" v-for="(item, index) in list" :key="index">
      <view class="location">
        <view class="box">
          <view class="left">
            <view class="title" @click="onShop(item.shop_id)">
              <image :src="BaseUrl + '/static/common/cen7.png'" mode="scaleToFill" />
              <text>{{ item.shop_name }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view
          class="center"
          style="padding: 20rpx"
          v-for="(item1, index11) in item.products"
          :key="index11"
        >
          <image :src="$showImg(item1.image)" mode="scaleToFill" />
          <view class="center-info">
            <view style="padding-right: 20rpx; box-sizing: border-box">
              <view class="title line-clamp-2">{{ item1.title }}</view>
              <view class="sub">
                <span v-for="v in item1.sku.difference" :key="v">{{ v }}</span>
              </view>
            </view>
            <view>
              <view class="price">¥{{ goodstype == 'group' || goodstype == 'alone' || goodstype == 'ladder' ? item.sub_price : item1.sku.price }}</view>
              <view class="num">
                <!-- x{{ dataObj.num ? dataObj.num : dataObj[0].number }} -->
                x{{ item1.number }}
              </view>
            </view>
          </view>
        </view>
        <view class="bottom">
          <template v-if="type == 'lvyou'">
            <view class="text">
              <text>预约日期</text>
              <text>{{ dataObj.day }}</text>
            </view>
            <view class="text">
              <text>时间范围</text>
              <text>{{ dataObj.time_range }}</text>
            </view>
            <view class="text" @click="maskShow = true">
              <text>预约人数</text>
              <text>{{ dataObj.num }}</text>
            </view>
          </template>
          <template v-if="type == 'gmmp'">
            <view class="text">
              <text>预约日期</text>
              <text>{{ dataObj.day }}</text>
            </view>
            <view class="text">
              <text>入住人数</text>
              <text>{{ dataObj.num }}</text>
            </view>
            <view v-for="(v, index) in dataObj.people" :key="index">
              <view class="text">
                <text>联系人</text>
                <text>{{ v.name }}</text>
              </view>
              <view class="text">
                <text>身份证号</text>
                <text>{{ v.idcard }}</text>
              </view>
            </view>
            <view class="text">
              <text>联系电话</text>
              <text>{{ dataObj.mobile ? dataObj.mobile : dataObj.phone }}</text>
            </view>
          </template>
          <view class="text" v-if="type == 'goods' || type == 'group' || type == 'alone'">
            <text>快递物流</text>
            <text>{{ item.freight.name }}</text>
          </view>
          <view class="text" v-if="type == 'goods' || type == 'group' || type == 'alone'">
            <text>运费</text>
            <text>{{ item.freight.price || "无" }}</text>
          </view>
          <view class="text" v-if="type == 'goods'">
            <text>服务方式</text>
            <view>
              <text style="margin-left: 10rpx" v-for="item1 in item.products" :key="item1.id">
                {{ item1.type == "normal" ? "线下配送" : "线下核销" }}
              </text>
            </view>
          </view>
          <view class="text">
            <text>备注</text>
            <!-- <input
              type="text"
              v-model="item.remarks"
              placeholder="请填写备注"
              style="text-align: right"
            /> -->
            <textarea
              v-model="item.remarks"
              placeholder="请填写备注"
              placeholder-class="textarea-placeholder"
              style="text-align: right; width: 50vw; height: 60rpx"
            />
          </view>
          <view class="log">
            <text style="color: #9e9e9e"> 共{{ type == "lvyou" ? 1 : item.number }}件， </text>
            <text style="color: #000">小计:</text>
            <text class="price icon">
              {{ (Number(item.order_price) + Number(item.freight.price)).toFixed(2) }}
            </text>
          </view>
        </view>
      </view>
      <view class="youhui">
        <view
          class="text"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <text>优惠折扣</text>
          <view class="pick" @click="openP(index)">
            <!-- {{ selCoupon.price || "请选择" }} -->
            {{ item.selCouponPrice || "请选择" }}
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="youhui1" v-if="orderData.exchange_score">
        <view
          class="text"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <text>
            积分抵用
            <text v-if="item.jifenNum">￥{{ item.jifenNum || null }}</text>
          </text>

          <u-input
            v-model="item.score"
            type="number"
            :max="lastJifen"
            :placeholder="'全部 ' + allJifen"
            @input="blurJifen(item, index)"
            input-align="right"
          />
          <!-- @blur="blurJifen(item, index)" -->
        </view>
      </view>
    </view>

    <view class="fixBox">
      <view class="log">
        <text style="color: #9e9e9e"> 共{{ type == "lvyou" ? 1 : allNumer }}件， </text>
        <text style="color: #000">小计:</text>
        <text class="price">
          {{ allPrice.toFixed(2) - jifenNum <= 0 ? 0.01 : allPrice.toFixed(2) - jifenNum }}
          <!-- - (selCoupon.price ? selCoupon.price * 1 : 0) - jifenNum <=
            0
              ? 0.01
              : (
                  allPrice -
                  (selCoupon.price ? selCoupon.price * 1 : 0) -
                  jifenNum
                ).toFixed(2) -->
        </text>
      </view>
      <button class="btn" @click="submit">提交订单</button>
    </view>

    <uv-picker
      title="优惠券"
      ref="picker"
      keyName="name"
      :columns="[coupon]"
      @confirm="couponConfirm"
    >
    </uv-picker>
    <u-popup v-model="show" mode="bottom">
      <view class="item_box" v-for="(item, index) in coupon" :key="index">
        <image class="img" :src="BaseUrl + '/static/common/quan1.png'" mode="scaleToFill" />
        <view class="info">
          <view class="top">
            <view class="left">
              <view class="title"><text>￥</text>{{ item.price }}</view>
              <view class="box">
                <view class="date">{{ item.name }}</view>
                <button class="btn_s btn" v-if="!item.state" @click="couponConfirm(item.id, index)">
                  立即领取
                </button>
                <button class="btn_s btn" v-else @click="useThis(item, item.id)">立即使用</button>
              </view>
            </view>
          </view>
          <view class="bottom">有效期{{ item.enddate }}</view>
        </view>
      </view>
    </u-popup>
    <view class="mask" v-if="maskShow" @click="maskShow = false">
      <view class="people-box">
        <view class="people-item">
          <text>姓名</text>
          <text>身份证号</text>
        </view>
        <view class="people-item" v-for="v in dataObj.people" :key="v.id">
          <text>{{ v.name }}</text>
          <text>{{ v.idcard }}</text>
        </view>
      </view>
    </view>
    <view class="errMsg" v-if="showErr">
      {{ errText }}
    </view>
  </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
import { getBrowseList, getRefreshUser } from "../../utils/newLive.js";
export default {
  data() {
    return {
      score: null,
      jifenNum: null,
      allJifen: 0.01,
      BaseUrl,
      list: [],
      shopInfoed: {},
      dataObj: {},
      orderData: {
        lists: [],
        statis: {
          allnum: 1,
          allsub: 0,
        },
      },
      show: false,
      page: [],
      address: {}, //收货地址
      sumbitData: {}, //提交订单数据
      itemIndex: null,
      remarks: "",
      coupon: [],
      selCoupon: {},

      goodsId: 0,
      // 订单类型
      type: "goods",
      maskShow: false,
      people: [],
      time_range: "",
      list: {},
      ids: [],
      allPrice: 0,
      allNumer: 0,
      ok: true,
      goodstype: "",
      allScore: 0,
      lastJifen: 0,
      payType: true,
      errText: "",
      showErr: false,
    };
  },
  watch: {
    list: {
      handler(val) {
        console.log(val, "val");
        this.allPrice = 0;
        this.allScore = 0;
        let priceList = [];
        val.forEach((item) => {
          // this.allPrice =
          //   this.allPrice +
          //   (Number(item.order_price) +
          //     Number(item.freight.price ? item.freight.price : 0) -
          //     Number(item.coupon.price ? item.coupon.price : 0) - Number(item.jifenNum?item.jifenNum:0) <=
          //   0
          //     ? 0.01
          //     : Number(item.order_price) +
          //       Number(item.freight.price ? item.freight.price : 0) -
          //       Number(item.coupon.price ? item.coupon.price : 0)) - Number(item.jifenNum?item.jifenNum:0);

          // item.order_price = Number(item.order_price) - Number(item.jifenNum?item.jifenNum:0) - Number(item.freight.price?item.freight.price:0) - Number(item.coupon.price?item.coupon.price:0);
          priceList.push(
            Number(item.order_price) +
              Number(item.freight.price ? item.freight.price : 0) -
              Number(item.coupon.price ? item.coupon.price : 0) -
              Number(item.jifenNum ? item.jifenNum : 0)
          );
          // this.allPrice = this.allPrice + (Number(item.order_price) + Number(item.freight.price?item.freight.price:0) - Number(item.coupon.price?item.coupon.price:0) - Number(item.jifenNum?item.jifenNum:0));

          this.allScore = this.allScore + Number(item.score ? item.score : 0);
          // if(this.allScore > this.allJifen){
          //   this.allScore = this.allJifen;
          //   this.payType = false;
          //   uni.showToast({
          //     title: "积分不足",
          //     icon: "none",
          //   })
          // } else {
          //   this.payType = true;
          // }
        });
        console.log(priceList, "价格列表");
        priceList.forEach((item) => {
          this.allPrice = this.allPrice + Number(item == 0 ? 0.01 : item);
        });
        uni.setStorageSync("order_price", priceList);
        this.lastJifen = this.allJifen - this.allScore;
        console.log(this.allPrice, "总价");
      },
      deep: true,
    },
  },
  onLoad(options) {
    if (options.ids) {
      this.ids = JSON.parse(options.ids);
    }
    if (options.data) {
      console.log(JSON.parse(options.data), "数据");
      this.dataObj = JSON.parse(options.data);
      this.goodstype = this.dataObj.type ? this.dataObj.type : "goods";
      this.type = this.dataObj.type ? this.dataObj.type : "lvyou";
      console.log(this.dataObj, "数据");
    }
    if (options.goods_id) {
      this.goodsId = options.goods_id ? options.goods_id : 0;
    }
    this.getCoupon();
    this.confirm();
  },
  async onShow() {
    const data = await getRefreshUser(uni.getStorageSync("token"));
    uni.setStorageSync("score", data.data.userinfo.score);
    this.allJifen = data.data.userinfo.score;
    this.address = uni.getStorageSync("address");
    this.sumbit = uni.getStorageSync("datas"); //提交订单的数据
  },
  methods: {
    blurJifen(item, index) {
      // 先获取输入的分数
      let userInputScore = item.score;

      // 计算当前输入积分对应的抵扣价格
      let deductionPrice = userInputScore / this.orderData.exchange_score;

      // 检查用户输入的分数是否超过了总积分
      if (userInputScore > this.allJifen) {
        // 如果超过了，将其设置为最大可允许值（即总积分），并重新计算抵扣价格
        item.score = this.allJifen;
        deductionPrice = this.allJifen / this.orderData.exchange_score;
        item.jifenNum = deductionPrice.toFixed(2);
        console.log("积分已超过总积分，已自动调整为最大允许值。");
        this.payType = false;
        uni.showToast({
          title: "积分已超过总积分，已自动调整为最大允许值。",
          icon: "none",
        });
      } else {
        // 如果没有超过总积分，正常计算jifenNum
        item.jifenNum = deductionPrice.toFixed(2);
        this.payType = true;
      }

      // 检查抵扣价格是否超过了订单价格
      console.log(
        Number(item.order_price) +
          Number(item.freight.price ? item.freight.price : 0) -
          Number(item.coupon.price ? item.coupon.price : 0) -
          Number(item.jifenNum ? item.jifenNum : 0),
        "订单价格"
      );
      if (
        Number(item.order_price) +
          Number(item.freight.price ? item.freight.price : 0) -
          Number(item.coupon.price ? item.coupon.price : 0) -
          Number(item.jifenNum ? item.jifenNum : 0) <
        0
      ) {
        this.payType = false;
        console.log(this.payType);
        // 如果超过，给出提示并恢复之前的积分状态或采取其他合适的处理方式
        // alert("抵扣积分价值超过了订单价格，用不了那么多哦");
        uni.showToast({
          title: "抵扣积分价值超过了订单价格，用不了那么多哦",
          icon: "none",
        });
        // 这里可以选择恢复原积分值或不做任何操作，取决于具体需求
        // 例如：item.score = userInputScore; // 如果需要恢复的话
      } else {
        // 打印日志
        console.log("积分变化及抵扣价格检查", item);
        this.payType = true;
      }
    },
    openP(index) {
      this.itemIndex = index;
      this.getCoupon(this.list[index]);
    },
    dizhi() {
      uni.navigateTo({
        url: "/liu/pages/address?city='地址'",
      });
      uni.removeStorageSync("address");
    },
    // 获取商品

    // async getShopInfo() {
    //   this.$request
    //     .get("api/wanlshop.product/goods", {
    //       id: this.goodsId ? this.goodsId : this.dataObj.goods_id,
    //     })
    //     .then((res) => {
    //       this.list = [res.data];
    //       console.log(this.list, "获取商品");
    //       this.img = res.data.images;
    //     });
    // },
    // 获取优惠券
    async getCoupon(item) {
      console.log("获取优惠券", item);
      let goods_id = [];
      let shop_category_id = [];
      for (var i = 0; i < item.products.length; i++) {
        goods_id.push(item.products[i]["id"]);
        shop_category_id.push(item.products[i]["shop_category_id"]);
      }
      this.$request
        .get("api/wanlshop.coupon/query", {
          shop_id: item.shop_id,
          goods_id: this.unique(goods_id),
          shop_category_id: this.unique(shop_category_id),
          price: item.order_price,
        })
        .then((res) => {
          console.log("-=-=res", res);
          this.coupon = res.data;
          if (this.coupon.length > 0) {
            this.show = true;
          } else {
            uni.showToast({
              title: "无可用优惠券",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          console.log("-=-=err", err);
        });
    },
    unique(arr) {
      return Array.from(new Set(arr)).join(",");
    },
    useThis(item, id) {
      this.selCoupon = item;
      this.coupon_id = id;
      this.list[this.itemIndex].coupon = item;
      this.list[this.itemIndex].coupon_id = id;
      this.list[this.itemIndex].selCouponPrice = this.selCoupon.price;
      this.show = false;
    },
    couponConfirm(id, i) {
      let coupon = this.coupon[i];
      this.$request
        .post("api/wanlshop/coupon/receive", {
          id: id,
        })
        .then((res) => {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          coupon.id = res.data.id;
          coupon.state = true;
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
          // this.selCoupon = {};
        });
    },
    // 确认订单
    confirm() {
      if (!this.ok) {
        return;
      }

      let data = [];
      if (this.ids.length == 0) {
        data = [
          {
            goods_id: this.goodsId ? this.goodsId : this.dataObj.goods_id,
            sku_id: this.dataObj.sku_id,
            number: this.type == "lvyou" || this.type == "gmmp" ? 1 : this.dataObj.num,
            groups_id: this.dataObj.groups_id,
            ladder_id: this.dataObj.ladder_id,
            type: this.goodstype,
          },
        ];
      } else {
        data = this.ids;
      }
      if (this.goodstype == "group" || this.goodstype == "alone" || this.goodstype == "ladder") {
        this.$request
          .post("api/wanlshop.groups.order/getOrderGoodsList", {
            data: data,
          })
          .then((res) => {
            res.data.orderData.lists.forEach((item) => {
              item.remarks = "";
              item.score = null;
              item.jifenNum = 0;
              item.coupon = {};
              item.coupon_id = 0;
              item.selCouponPrice = 0;
              item.selCoupon = {};
              item.coupon = {};
            });
            this.orderData = res.data;
            this.list = this.orderData.orderData.lists;
            console.log(this.list, "订单列表");
            this.list.forEach((item) => {
              this.allPrice = this.allPrice + Number(item.order_price) + Number(item.freight.price);
              this.allNumer += Number(item.number);
            });
            // uni.showToast({
            //   title: res.msg,
            //   icon: "none",
            // });
            console.log(this.allPrice, "价格");
          })
          .catch((err) => {
            this.showErr = true;
            this.errText = err.msg;
            setTimeout(() => {
              this.showErr = false;
              uni.navigateBack();
            }, 2000);
            this.ok = false;
          });
        return;
      }
      this.$request
        .post("api/wanlshop.order/getOrderGoodsList", {
          data: data,
        })
        .then((res) => {
          res.data.orderData.lists.forEach((item) => {
            item.remarks = "";
            item.score = null;
            item.jifenNum = 0;
            item.coupon = {};
            item.coupon_id = 0;
            item.selCouponPrice = 0;
            item.selCoupon = {};
            item.coupon = {};
          });
          this.orderData = res.data;
          this.list = this.orderData.orderData.lists;
          this.list.forEach((item) => {
            this.allPrice += Number(item.order_price) + Number(item.freight.price);
            this.allNumer += Number(item.number);
          });
          console.log(this.allPrice, "价格");
        })
        .catch((err) => {
          // uni.showToast({
          //   title: err.msg,
          //   icon: "none",
          // });
          this.showErr = true;
          this.errText = err.msg;
          setTimeout(() => {
            this.showErr = false;
            uni.navigateBack();
          }, 2000);
          this.ok = false;
        });
    },
    // 提交订单
    submit() {
      if (!this.address.id) {
        uni.showToast({
          title: "请选择地址",
          icon: "none",
        });
        return;
      }
      console.log(this.payType, "支付");
      if (!this.payType) {
        uni.showToast({
          title: "您输入的积分额度有误",
          icon: "none",
        });
        return;
      } else {
        let lists = [];
        console.log(this.list, "列表");
        this.list.forEach((item, index) => {
          lists.push({
            products: [],
            remarks: item.remarks,
            shop_id: item.shop_id,
            coupon_id: item.coupon.id ? item.coupon.id : 0,
            score: item.score ? item.score : 0,
          });
          item.products.forEach((item1) => {
            lists[index].products.push({
              freight_id: item1.freight.id,
              goods_id: item1.id,
              number: item1.number,
              sku_id: item1.sku.id,
              groupType: this.goodstype,
              groups_id: this.dataObj.groups_id,
              ladder_id: this.dataObj.ladder_id ? this.dataObj.ladder_id : 0,
              remarks: item1.remarks,
            });
          });
        });
        let order = {
          address_id: this.address.id,
          lists: lists,
        };
        console.log(order, "订单");
        // return
        if (this.goodstype == "group" || this.goodstype == "alone" || this.goodstype == "ladder") {
          this.$request
            .post("api/wanlshop.groups.order/addOrder", {
              order: order,
              // score: this.score,
              token: this.orderData.token,
            })
            .then((res) => {
              if (res.code == 1) {
                console.log(res.data, "拼团订单");
                uni.redirectTo({
                  url:
                    "/pages/page/paysuccess?order_id=" +
                    res.data.list[0].order_id +
                    "&order_type=groups",
                });
              }
            })
            .catch((err) => {
              uni.showToast({
                title: err.msg,
                icon: "none",
              });
            });
          return;
        }
        this.$request
          .post("api/wanlshop.order/addOrder", {
            order: order,
            json: this.dataObj,
            token: this.orderData.token,
          })
          .then((res) => {
            if (res.code == 1) {
              uni.setStorageSync("orderPay", res.data);
              uni.redirectTo({
                url: "/pages/page/paysuccess",
              });
            }
          })
          .catch((err) => {
            uni.showToast({
              title: err.msg,
              icon: "none",
            });
          });
        this.$request
          .post("api/wanlshop/cart/storage", {
            data: this.ids,
            type: "del",
          })
          .then((res) => {
            console.log(res, "操作购物车");
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.confirmOrder {
  padding: 30rpx 30rpx 100rpx 30rpx;
}

.card {
  width: 100%;
  background: white;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.left {
  width: 70%;
  padding-right: 50rpx;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    text {
      font-size: 30rpx;
      font-weight: bold;
      margin-left: 20rpx;
    }
  }

  .address {
    font-size: 24rpx;
    color: #777;
    line-height: 1.5em;
  }
}

.addressBox {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;

  image {
    width: 54rpx;
    height: 54rpx;
  }

  .text {
    margin-left: 20rpx;

    .user {
      text {
        line-height: 1.8em;
      }

      .name {
        font-size: 34rpx;
        font-weight: bold;
      }

      .mobile {
        color: #777;
        margin-left: 10rpx;
      }
    }
  }
}

.center {
  display: flex;
  justify-content: space-between;

  image {
    max-width: 180rpx;
    max-height: 180rpx;
    margin-right: 30rpx;
  }

  .center-info {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title {
      font-size: 32rpx;
      line-height: 1.4em;
    }

    .sub {
      font-size: 26rpx;
      opacity: 0.5;
      margin-top: 20rpx;
    }

    .price {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 1.4em;
    }

    .num {
      font-size: 26rpx;
      opacity: 0.5;
      margin-top: 20rpx;
      text-align: right;
    }
  }
}

.bottom {
  font-size: 30rpx;

  .text {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;

    text {
      font-weight: bold;
    }

    .pick {
      color: #9e9e9e;
    }

    .sub {
      color: #9e9e9e;
      font-weight: normal;
    }
  }

  .beizhu {
    display: flex;
    justify-content: space-between;

    text {
      font-weight: bold;
    }

    .pick {
      color: #9e9e9e;
    }

    .sub {
      color: #9e9e9e;
      text-align: right;
      font-weight: normal;
    }
  }
}
.youhui {
  height: 40rpx;
  line-height: 40rpx;
  text {
    font-weight: bold;
  }

  .pick {
    color: #9e9e9e;
  }
}
.youhui1 {
  line-height: 40rpx;
  text {
    font-weight: bold;
  }

  .pick {
    color: #9e9e9e;
  }
}

.fixBox {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 100%;
  background: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 9;
}

.log {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 0;

  .price {
    color: #ec6b34;
    font-weight: bold;
  }

  .icon::before {
    content: "￥";
    color: #ec6b34;
    font-size: 24rpx;
  }
}

.btn {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: linear-gradient(90deg, #00966e, #057748);
  margin-left: 20rpx;
  border-radius: 30rpx;
  color: #fff;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  z-index: 999;

  .people-box {
    background-color: #fff;
    border-radius: 10rpx;
    width: 500rpx;
    height: 700rpx;

    .people-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      border-bottom: 1px solid #f1f1ff;
    }
  }
}
.item_box {
  width: 90%;
  margin: 0rpx auto;
  height: 320rpx;
  position: relative;
  .img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .info {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 5% 0 14%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      .left {
        width: 100%;
        .title {
          font-size: 70rpx;
          font-weight: bold;
          text {
            font-size: 54rpx;
            font-weight: bold;
          }
        }
        .box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 0;
          .date {
            font-size: 28rpx;
            color: #888;
          }
          .btn {
            width: 180rpx;
            height: 66rpx;
            line-height: 66rpx;
            border-radius: 30rpx;
          }
          .btn_s {
            background: linear-gradient(90deg, #00a67a, #057748);
          }
          .btn_d {
            background: #858585;
          }
        }
      }
    }
    .bottom {
      padding-top: 20rpx;
      color: #989898;
    }
  }
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.errMsg {
  width: 60vw;
  padding: 20rpx;
  border-radius: 20rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: #565656;
  color: white;
}
</style>
